<template>
  <div>
    <!-- 图片，把它当作按钮，点开它就打开对话框 -->
    <div class="btn_img" @click="openDialog()">
      <img :src="coverImageUrl" />
    </div>

    <!-- 对话框 -->
    <el-dialog
      append-to-body
      title="上传素材" :visible.sync="dialogVisible">
    <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="素材库" name="images">
     <div>
      <el-radio-group v-model="isCollected" size="mini" @change="hSwitchCollect">
        <el-radio-button label="全部"></el-radio-button>
        <el-radio-button label="收藏"></el-radio-button>
      </el-radio-group>
     </div>

     <!-- row表示一行 分成24列 ， :span='6' 占24的6列，gutter列与列之间的间隔 -->
    <el-row :gutter="10">
    <el-col v-for="image in images" :key="image.id" class="img_item" :class='{selected: image.url===selectedImageURL}'   :span="4">
     <el-image
     @click="hselectedImage(image.url)"
              style="height: 100px;"
              :src="image.url"
              fit="cover"></el-image>
  </el-col>
  </el-row>
     <!-- 分页 -->
     <el-pagination
        :disabled="isLoading"
        background
        layout="prev, pager, next"
        :page-size="10"
        @current-change="hCurrentChange"
        :total="total_count"
      >
      </el-pagination>

    </el-tab-pane>
    <el-tab-pane label="上传图片" name="uploads">
      <!--
          [el-upload](https://element.eleme.cn/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan)的主要属性：
          // 不走axios请求
          // 不走axios请求
          // 不走axios请求
          // 不走axios请求 是我们自己独立写的 不走请求拦截器
          - action： 必选参数，上传的地址：http://ttapi.research.itcast.cn/mp/v1_0/user/images
          - headers: 设置上传的请求头部。要携带token
          - name：上传的文件字段名。要与接口中要求保持一致。
          - show-file-list： 是否显示已上传文件列表
          - before-upload: 上传之前对文件进行检测。
          - on-success：文件上传成功时的钩子。`function(response, file, fileList)` -->
       <el-upload
         class="avatar-uploader"
         action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
         :headers="headers"
         name="image"
         :show-file-list="false"
         :on-success="handleAvatarSuccess"
         :before-upload="beforeAvatarUpload">
         <!-- 如果上传成功了，就显示这个图片
              对于图片来说，并不是一旦设置了src之后就能立即看到效果，比如网速很慢
          -->
         <!-- <img v-if="uploadImageUrl" :src="imageUrl" class="avatar"> -->
         <!-- load事件 -->
         <el-image v-if="uploadImageUrl" :src="imageUrl" class="avatar" @load="hImageLoad"></el-image>
         <!-- 否则就显示加号 -->
         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
       </el-upload>
    </el-tab-pane>

  </el-tabs>

  <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="hConfirm = false">确 定</el-button>
     </span>
    </el-dialog>
  </div>

</template>

<script>
import defaultImg from '@/assets/default.png'
export default {
  name: 'cover',
  props: ['value'], // 收到父组件通过v-model传入的值
  data () {
    return {
      coverImageUrl: defaultImg, // 封面预览图片
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      uploadImageUrl: '', // 上传成功之后的预览图片地址
      selectedImageUrl: '', // 记录当前被选中的图片的地址
      page: 1, // 页码默认是第一页
      images: [], // 图片列表
      total_count: 0, // 总页数
      isCollected: '全部', // 默认选中全部
      activeName: 'images', // 哪个tab标签属于选中状态
      dialogVisible: false // 弹出对话框
    }
  },
  watch: {
    // 基础格式： 属性名(新值，旧值) {}
    // value (newVal, oldVal) {
    //   console.log('图片变化了', oldVal, newVal)
    //   this.coverImageUrl = newVal
    // }
    // 高级格式：
    // 属性名: {
    // handler: function (newVal, oldVal) {

    // },
    // immediate: true or false.如果是true，它会立即（它获取值时）执行一次
    // }
    //
    value: {
      handler: function (newVal, oldVal) {
        console.log('图片有变化了', newVal, oldVal)
        this.coverImageUrl = newVal || defaultImg
      },
      immediate: true // 如果是true，他会立刻（它获取值的时候）执行一次
    }
  },
  methods: {
    // 用户点击了确认
    hConfirm () {
      if (this.activeName === 'images' && this.selectedImageUrl !== '') {
        this.$message.error('请先选中图片')
        return
      }

      if (this.activeName === 'upload' && this.uploadImageUrl !== '') {
        this.$message.error('请先上传图片')
        return
      }

      this.coverImageUrl = this.activeName === 'images' ? this.selectedImageUrl : this.uploadImageUrl
      // 抛出input事件及数据
      this.$emit('input', this.coverImageUrl)
      this.dialogVisible = false // 上传结束后关闭对话框
    },
    // 在如下两种情况下，点击是有效的
    //   if (this.activeName === 'images' && this.selectedImageUrl !== '') {
    //     this.coverImageUrl = this.selectedImageUrl
    //   } else if (this.activeName === 'upload' && this.uploadImageUrl !== '') {
    //     this.coverImageUrl = this.uploadImageUrl
    //   } else {
    //     this.$message.error('请先选中图片')
    //   }
    // },
    // 上传成功之后
    hUploadSuccess (res, file) {
      // res中保存着本次上传操作成功后，后端接口返回的数值
      // 1. 预览效果
      this.uploadImageUrl = res.data.url
      console.log('文件上传成功', res, file)
      this.$message.success('上传成功')
      this.uploadImageUrl = res.data.url
    },
    // 图片上传之前做一些检验
    hBeforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      // file.size 单位是字节
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    hselectedImage (url) {
      console.log('选中图片', url)
      this.selectedImageUrl = url
    },
    // 单独封装要给方法来获取详情的查询参数
    buildParams () {
      const paramObj = {
        // collect  否 true 或 false 是否是收藏的图片
        collect: this.isCollected === '收藏',
        // collect: is_collected,
        // page     否 页数
        page: this.page,
        // per_page 否 每页数量
        per_page: 10
      }
      return paramObj
    },
    async loadImages () {
      try {
        const params = this.buildParams()
        const res = await this.$axios({
          method: 'get',
          url: '/mp/v1_0/user/images',
          params: params
        })
        console.log(res)
        // 保存数据
        this.images = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
      }
    },
    // 用户点击页码
    hCurrentChange (curPage) {
      // 1.更新页码
      this.page = curPage
      // 2.重铺图片页面
      this.loadImages()
    },
    // 用户在收藏和全部之间切换
    hSwitchCollect () {
      // 每次切换都要从第一页开始显示
      this.page = 1
      // 2.加载图片页面
      this.loadImages()
    },
    // 点击封面图片
    openDialog () {
      // 1.弹出对话框
      this.dialogVisible = true
      // 把上一次的结果情况掉
      this.this.selectedImageUrl = ''
      this.uploadImageUrl = ''
      // 2.加载图片页面
      this.loadImages()
    }
  }
}
</script>

<style scoped lang='less'>
// 图片按钮
.btn_img {
  cursor: pointer;
  width: 150px;
  height: 150px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.selected::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3) url(../assets/selected.png) no-repeat center / 50px 50px;
  }
// 素材列表

  .img_list{
  margin-top: 15px;
  .img_item{
    position: relative;
    width: 150px;
    height: 120px;
    border: 1px dashed #ddd;
    display: inline-block;
    margin-right: 15px;
    /deep/ img {
      width: 100%;
      height: 100%;
      display: block;

      cursor: pointer
    }
  }
}

.avatar-uploader {
    text-align: center;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
</style>
